<template>
  <a-modal title-align="start" title="接/拒单" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="900">
    <div class="mb10">
      <div class="title-bar">定制图</div>
      <a-image-preview-group infinite>
        <a-space>
          <a-image v-for="(item, index) in props.getPicList(props.info)" :key="index" :src="item.url" width="40" />
        </a-space>
      </a-image-preview-group>
    </div>

    <a-descriptions :data="list" bordered>
      <template #label="{ label }">{{ label }}：</template>
      <template #value="{ data, value }">
        <div v-if="data.label == '订单号'">{{ info.platformOrderNumber }}</div>
        <div v-if="data.label == '店铺'">{{ info.shopName }}</div>
        <div v-if="data.label == '订单商品'">
          <span>{{ info.msku ? info.msku : '--' }}</span>
          <span> / </span>
          <span>{{ info.asin ? info.asin : '--' }}</span>
        </div>
        <div v-if="data.label == '产品SKU'">{{ $extract(info, 'product.productSku') }}</div>
        <div v-if="data.label == '定制编号'">{{ $extract(info, 'customCode') }}</div>
        <div v-if="data.label == '期望交期'">{{ $setTime(info.gmtExpectDelivery, 'YYYY-MM-DD') }}</div>
        <div v-if="data.label == '提交工厂时间'">{{ $setTime(info.gmtSubmitSupplier, 'YYYY-MM-DD') }}</div>
        <div v-if="data.label == '采购方'">{{ $extract(info, 'purchaseCompany.companyName') }}</div>
        <div v-if="data.label == '采购员'">{{ $extract(info, 'purchaser.name') }}</div>
      </template>
    </a-descriptions>
    <a-descriptions class="mt10" :data="customBasicInfoList" :valueStyle="{ width: '300px' }" :labelStyle="{ width: '90px', textAlign: 'right' }" :column="2" bordered>
      <template #label="{ label }">{{ label }}：</template>
      <template #value="{ data, value }">
        <div v-if="data.label == '毛坯半成品提供方'">{{ getSupplierName() }}</div>
        <div v-if="data.label == '材质单价'">{{ props.info.supplierCloseCost.amtAvgMaterial }}</div>
        <div v-if="data.label == '单件加工费'">{{ $extract(info, 'supplierCloseCost.amtAvgProcess') }}</div>
        <div v-if="data.label == '税率'">{{ props.info.supplierCloseCost.taxRate }}{{ props.info.supplierCloseCost.includeTax ? '（含税）' : '（不含税）' }}</div>
        <div v-if="data.label == '定制类型'">{{ $extract(info, 'customInfo.customType') }}</div>
        <div v-if="data.label == '材质'">{{ $extract(info, 'customInfo.material') }}</div>
        <div v-if="data.label == '电镀颜色'">{{ $extract(info, 'customInfo.platinColor') }}</div>
        <div v-if="data.label == '刻字内容'">{{ $extract(info, 'customInfo.fontTxt') }}</div>
        <div v-if="data.label == '字体'">{{ $extract(info, 'customInfo.fontFamily') }}</div>
        <div v-if="data.label == '戒指尺码'">{{ $extract(info, 'customInfo.ringSize') }}</div>
        <div v-if="data.label == '石头'">{{ $extract(info, 'customInfo.stone') }}</div>
        <div v-if="data.label == '链条'">{{ getfittingName(info) }}</div>
        <div v-if="data.label == '字印'">{{ $extract(info, 'customInfo.fontPrint') }}</div>
        <div v-if="data.label == '备注'">{{ $extract(info, 'customInfo.remark') }}</div>
      </template>
    </a-descriptions>
    <template #footer class="modal-footer">
      <a-button class="gray-outline" @click="showvisible = false">取消</a-button>

      <a-popover v-model:popup-visible="showPopoverVisible" trigger="click">
        <a-button class="gray-outline" @click="showPopoverVisible = true">拒绝接单</a-button>
        <template #content>
          <a-textarea v-model="rejectText" placeholder="请输入拒绝原因" allow-clear />
          <div class="flex-c-end">
            <a-space>
              <a-button size="small" class="gray-outline" @click="showPopoverVisible = false">取消</a-button>
              <a-button size="small" type="primary" @click="submit(false)">确认</a-button>
            </a-space>
          </div>
        </template>
      </a-popover>

      <a-button type="primary" @click="submit(true)">确认接单</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { Message } from '@arco-design/web-vue'
  import { defineComponent, ref, computed } from 'vue'
  import { batchSupplierTake } from '@/api/purchase'
  let props = defineProps(['modelValue', 'type', 'info', 'getfittingName', 'getPicList'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  let showPopoverVisible = ref(false)
  let rejectText = ref('')
  let list = ref([
    { label: '定制编号', value: 'Socrates' },
    { label: '产品SKU', value: 'Socrates' },
    { label: '采购方', value: 'Socrates' },
    { label: '采购员', value: 'Socrates' },
    { label: '期望交期', value: 'Socrates' },
    { label: '提交工厂时间', value: 'Socrates' },
  ])
  let customBasicInfoList = ref([
    { label: '毛坯半成品提供方', value: 'Socrates' },
    { label: '材质单价', value: 'Socrates' },
    { label: '单件加工费', value: 'Socrates' },
    { label: '税率', value: 'Socrates' },
    { label: '定制类型', value: 'Socrates' },
    { label: '材质', value: 'Socrates' },
    { label: '电镀颜色', value: 'Socrates' },
    { label: '刻字内容', value: 'Socrates' },
    { label: '石头', value: 'Socrates' },
    { label: '字体', value: 'Socrates' },
    { label: '字印', value: 'Socrates' },
    { label: '戒指尺码', value: 'Socrates' },
    { label: '链条', value: 'Socrates' },
    { label: '备注', value: 'Socrates' },
  ])

  const submit = async (accept: boolean) => {
    if (!rejectText.value && !accept) return Message.error('请输入拒绝原因')
    let params = {
      accept: accept,
      idList: [props.info.id],
      rejectReason: rejectText.value,
    }
    const res: any = await batchSupplierTake(params)
    if (res) {
      Message.success('操作成功')
      showPopoverVisible.value = false
      showvisible.value = false
      emits('save')
    }
  }

  const getSupplierName = () => {
    if (props.info.supplierCloseCost.semiNoPick) {
      return '供应商'
    } else {
      return props.info.supplierCloseCost.semiWarehouseCode == 'CK86' ? '需求方' : '采购方'
    }
    // props.info.supplierCloseCost.semiNoPick ? '供应商' : props.info.supplierCloseCost.semiWarehouseName
  }
</script>

<style lang="less" scoped></style>
